<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_lobby.css">
    <style>
    </style>
</head>
<body>
    <div class="nav">
        <span>五子棋对战 </span>
        <a href="#" onclick=logout()>注销</a>
    </div>
    <div class="container">
        <div>
            <div id="screen"></div>
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <script>
        $.ajax({
            type: "get",
            url: "/user/getUserInfo",
            success: function (body) {
                if (body.code = "SUCCESS" && body.data != null) {
                    let result = body.data;
                    let screenDiv = document.querySelector("#screen");
                    screenDiv.innerHTML = '玩家: ' + result.username +
                        ' 分数: ' + result.score + '<br> 比赛场次: '
                        + result.totalCount + ' 获胜场次: ' + result.winCount
                }
            },
            error: function (){
                location.assign("login.html");
            }
        });
        let websocketUrl = "ws://" + location.host + "/findMatch";
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function () {
            console.log("onopen");
        }
        websocket.onclose = function () {
            console.log("onclose");
        }
        websocket.onerror = function () {
            console.log("onerror");
        }
        window.onbeforeunload = function () {
            websocket.close();
        }
        websocket.onmessage = function (e) {
            console.log(e + "....")
            console.log(e.data + "/a..")
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector('#match-button');
            if(!resp.ok) {
                console.log("游戏大厅中失败响应: " + resp.reason);
                return;
            }
            if(resp.message == 'startMatch') {
                console.log("进入匹配队列");
                matchButton.innerHTML = '匹配中...(点击停止)';
            } else if (resp.message == 'stopMatch') {
                console.log("离开匹配队列");
                matchButton.innerHTML = '开始匹配';
            } else if (resp.message == 'matchSuccess') {
                console.log("匹配到对手, 进入游戏房间");
                location.replace("/game_room.html");
            } else if(resp.message == 'repeatCollection') {
                alert("和游戏大厅断开连接，请重新登录");
                location.replace("/login.html");
            } else {
                console.log("非法响应" + resp.message);
            }
        }
        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function () {
            if(websocket.readyState == websocket.OPEN){
                // 处理是开始匹配还是结束匹配
                if(matchButton.innerHTML == '开始匹配'){
                    console.log("开始匹配");
                    websocket.send(JSON.stringify(
                        {
                            message: 'startMatch',
                        }
                    ));
                } else if(matchButton.innerHTML == '匹配中...(点击停止)'){
                    console.log("停止匹配");
                    websocket.send(JSON.stringify(
                        {
                            message: 'stopMatch',
                        }
                    ));
                }
            } else {
                alert("连接断开，请重新登录");
                location.replace('/login.html');
            }
        }
        function logout(){
            //删除token
            localStorage.removeItem("user_token");
            console.log("用户注销");
            location.href = "login.html";
        }
    </script>
</body>
</html>